<template>
	<view>
		<view class="timeSlot" v-if="showFlag" style="position: relative;">
			<scroll-view  scroll-x="true" class="miaosha-list" @scroll-with-animation="true">
				<view @click="currentChange(index)" class="miaosha-item" v-for="(item, index) in dateList" :key="'c' + index" :class="index == currentIndex ? 'select' : ''">
					<view class="">{{ item.date }}</view>
					<view class="">{{ item.week }}</view>
					<view class="blueLine" v-if="index == currentIndex"></view>
				</view>
			</scroll-view>
				<text class="iconfont rightIcon" style="position: fixed;right: 10rpx;top: 68rpx;">&#xe79a;</text>
			<view class="train borderBottom1">
				<view class="train_left" style="display: flex;padding: 10rpx 0;">
					<view style="margin-right: 20rpx;margin-left: 10rpx;" class="blueBot"></view>
					<text>上午</text>
				</view>
			</view>
			<view class="seatNumber borderBottom10" style="background-color: #FFFFFF;">
				<view v-if="dateList[currentIndex].subject[0].title === '科目二'">
					<view class="" v-if="detail.cartype == 1">科目二：{{ dateList[currentIndex].subject[0].laplength }}分钟</view>
					<view class="" v-else="detail.cartype == 1">科目二</view>
					<view class="">{{ detail.cartype == 1 ? '单圈价格' : '课时价格' }}：{{ dateList[currentIndex].subject[0].price }}</view>
					<view class="">
						{{ detail.cartype == 1 ? '剩余圈数' : '剩余时间' }}：{{ dateList[currentIndex].subject[0].amyunumber || dateList[currentIndex].subject[0].amclasshour }}
					</view>
					<view
						class="immediatelyOrder"
						:class="dateList[currentIndex].subject[0].amyuyuestatus == 0 ? 'grayBg' : ''"
						@click="yuyueHandle(0, 0, dateList[currentIndex].subject[0].amyuyuestatus)"
					>
						{{ dateList[currentIndex].subject[0].amyuyuestatus == 0 ? '不可预约' : '立即预约' }}
					</view>
				</view>
				<view v-if="dateList[currentIndex].subject[0].title === '科目三'">
					<view class="" v-if="detail.cartype == 1">科目三：{{ dateList[currentIndex].subject[0].laplength }}分钟</view>
					<view class="" v-else="detail.cartype == 1">科目三</view>
					<view class="">{{ detail.cartype == 1 ? '单圈价格' : '课时价格' }}：{{ dateList[currentIndex].subject[0].price }}</view>
					<view class="">
						{{ detail.cartype == 1 ? '剩余圈数' : '剩余时间' }}：{{ dateList[currentIndex].subject[0].amyunumber || dateList[currentIndex].subject[0].amclasshour }}
					</view>
					<view
						class="immediatelyOrder"
						:class="dateList[currentIndex].subject[0].amyuyuestatus == 0 ? 'grayBg' : ''"
						@click="yuyueHandle(1, 0, dateList[currentIndex].subject[0].amyuyuestatus)"
					>
						{{ dateList[currentIndex].subject[0].amyuyuestatus == 0 ? '不可预约' : '立即预约' }}
					</view>
				</view>
			</view>
			<view class="train borderBottom1">
				<view class="train_left" style="display: flex;padding: 10rpx 0;align-items: center;">
					<view style="margin-right: 20rpx;margin-left: 10rpx;" class="blueBot"></view>
					<text>下午</text>
				</view>
			</view>
			<view class="seatNumber borderBottom10" style="background-color: #FFFFFF;">
				<view v-if="dateList[currentIndex].subject[0].title === '科目二'">
					<view class="" v-if="detail.cartype == 1">科目二：{{ dateList[currentIndex].subject[0].laplength }}分钟</view>
					<view class="" v-else="detail.cartype == 1">科目二</view>
					<view class="">{{ detail.cartype == 1 ? '单圈价格' : '课时价格' }}：{{ dateList[currentIndex].subject[0].price }}</view>
					<view class="">
						{{ detail.cartype == 1 ? '剩余圈数' : '剩余时间' }}：{{ dateList[currentIndex].subject[0].pmyunumber || dateList[currentIndex].subject[0].pmclasshour }}
					</view>
					<view
						class="immediatelyOrder"
						:class="dateList[currentIndex].subject[0].pmyuyuestatus == 0 ? 'grayBg' : ''"
						@click="yuyueHandle(0, 1, dateList[currentIndex].subject[0].pmyuyuestatus)"
					>
						{{ dateList[currentIndex].subject[0].pmyuyuestatus == 0 ? '不可预约' : '立即预约' }}
					</view>
				</view>
				<view v-if="dateList[currentIndex].subject[0].title === '科目三'">
					<view class="" v-if="detail.cartype == 1">科目三：{{ dateList[currentIndex].subject[0].laplength }}分钟</view>
					<view class="" v-else="detail.cartype == 1">科目三</view>
					<view class="">{{ detail.cartype == 1 ? '单圈价格' : '课时价格' }}：{{ dateList[currentIndex].subject[0].price }}</view>
					<view class="">
						{{ detail.cartype == 1 ? '剩余圈数' : '剩余时间' }}：{{ dateList[currentIndex].subject[0].pmyunumber || dateList[currentIndex].subject[0].pmclasshour }}
					</view>
					<view
						class="immediatelyOrder"
						:class="dateList[currentIndex].subject[0].pmyuyuestatus == 0 ? 'grayBg' : ''"
						@click="yuyueHandle(1, 1, dateList[currentIndex].subject[0].pmyuyuestatus)"
					>
						{{ dateList[currentIndex].subject[0].pmyuyuestatus == 0 ? '不可预约' : '立即预约' }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { subscribeOrder,testOrder } from '@/api/user/order/subscribeOrder.js';
export default {
	data() {
		return {
			dateList: [],
			currentIndex: 0,
			showFlag:false,
			detail:{},
		};
	},
	async onLoad(options) {
		let res;
		if(options.type==1){
			res = await subscribeOrder(options.id);
		}else{
			res = await testOrder(options.id);
		}
		this.dateList = res.data.calendar;
		this.detail = res.data.coach;
		this.showFlag=true
	},
	methods: {
		currentChange(index) {
			this.currentIndex = index;
		},
		animationChange(e) {
			this.swiperCurrent = e.detail.current;
		},
		yuyueHandle(item,index,status){
			if(status==1){
				if(item==0){
					if(index==0){
						uni.$emit('date', {
							lesson:this.dateList[this.currentIndex].subject[0],
							time:0,
							date:this.dateList[this.currentIndex].date
						});
						uni.navigateBack({
							delta: 1
						});
					}else{
						uni.$emit('date', {
							lesson:this.dateList[this.currentIndex].subject[0],
							time:1,
							date:this.dateList[this.currentIndex].date
						});
						uni.navigateBack({
							delta: 1
						});
					}
				}else{
					if(index==0){
						uni.$emit('date', {
							lesson:this.dateList[this.currentIndex].subject[0],
							time:0,
							date:this.dateList[this.currentIndex].date
						});
						uni.navigateBack({
							delta: 1
						});
					}else{
						uni.$emit('date', {
							lesson:this.dateList[this.currentIndex].subject[0],
							time:1,
							date:this.dateList[this.currentIndex].date
						});
						uni.navigateBack({
							delta: 1
						});
					}
				}
			}else{
				uni.showToast({
					title: '暂不可预约',
					icon:'none'
				});
			}
			
		},
	}
};
</script>

<style lang="scss">
@import './css/teacherDetail.scss';

</style>
